<template>
  <section class="pagination-wrapper">
    <el-pagination
      :current-page="page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="rows"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </section>
</template>

<script>
  export default {
    name: 'Pagination',

    props: {
      total: { type: Number, default: 0 },
      size: { type: Number, default: 10 },
    },

    data: () => ({
      page: 1,
      rows: 10,
    }),
     computed: {
      pageParams() {
        return {
          page: this.page,
          rows: this.rows,
        }
      },
    },
    
    mounted() {
      this.rows = this.size
    },

    methods: {
      handleSizeChange(size) {
        this.rows = size
        this.$emit('fetch', { rows: size, page: this.page })
      },
      
      handleCurrentChange(no) {
       
        this.page = no
        this.$emit('fetch', { rows: this.rows, page: no })
      },
      
      reset() {
        this.page = 1
        this.rows = 10
      }
    }
  }
</script>

<style lang="less" scoped>
  .pagination-wrapper {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-left: 10px;
  }
  
</style>
